<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fuck</title>
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/materialize/0.100.2/css/materialize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/hint.css/2.5.0/hint.min.css" rel="stylesheet">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    div {
      height: 100%;
    }

    .content {
      height: 100%;
      min-height: 100%;
      /*for mozilla*/
    }

    html>body .content {
      height: auto;
    }

    #header {
      /*TODO:Delete Notation          */
      background: url(./assets/kobako_bg_green-min.jpg) center center no-repeat fixed #8F2041;
      background-color: black;
      background-size: cover;
    }

    #header {
      color: white;
    }

    .vertical-center {
      min-height: 100%;
      /* Fallback for browsers do NOT support vh unit */
      min-height: 100vh;
      /* These two lines are counted as one :-)       */
      display: flex;
      align-items: center;
    }

    p {
      font-family: "Times New Roman", Times, serif;
      font-size: 14px;
    }

    #one {
      /*         background: url((http://cloud.niklausgerber.com/1X180T1X2v3d/dark-orange.png) center center no-repeat fixed #8F2041; */
    }

    #two,
    #four {
      background-color: #CDC8B1;
    }

    #five {
      background-color: #696969;
      color: white;
    }

    .container {
      width: 65%;
    }

    .custom-blue {
      color: #458B74;
    }

    img {
      height: auto;
      max-width: 100%;
    }

    /*       a {
      text-decoration: none;
      color: black;
      vertical-align: middle;
      } */

    .nav-wrapper a {
      text-decoration: none;
      color: white;
    }

    .pin-top {
      position: relative;
    }

    .pin-bottom {
      position: relative;
    }

    .pinned {
      position: fixed !important;
    }
  </style>
</head>

<body>
  <div id="main"></div>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/materialize/0.100.2/js/materialize.min.js"></script>

  <!-- ELM -->
  <script src="./fuck.js"></script>
  <script>
    const node = document.getElementById('main')
    const app = Elm.Main.embed(node)
  </script>
</body>

</html>